<template>
  <a-card class="general-card" title="最新动态" style="margin-bottom: 14px">
    <template #extra>
      <a-dropdown>
        <a-link>更多</a-link>
        <template #content>
          <a-doption>
            <a-link href="https://gitee.com/organizations/continew-admin_1/events" target="_blank" rel="noopener">
              Gitee
            </a-link>
          </a-doption>
          <!--          <a-doption>
            <a-link href="https://gitcode.com/org/continew/discussion" target="_blank" rel="noopener">GitCode</a-link>
          </a-doption>
          <a-doption>
            <a-link href="https://github.com/orgs/continew-org/discussions" target="_blank" rel="noopener">
              GitHub
            </a-link>
          </a-doption> -->
        </template>
      </a-dropdown>
    </template>
    <a-skeleton v-if="loading" :loading="loading" :animation="true">
      <a-skeleton-line :rows="10"></a-skeleton-line>
    </a-skeleton>
    <div v-else>
      <a-empty v-if="dataList.length === 0">暂无动态</a-empty>
      <div v-else>
        <div
          v-for="item in dataList"
          :key="item.id"
          class="commit arco-comment"
        >
          <img class="avatar" :src="item.actor.avatar" :alt="item.actor.username" width="40" height="40">
          <div class="arco-comment-details">
            <div class="arco-comment-content">
              <a-link :href="item.actor.url" target="_blank">{{ item.actor.nickname || item.actor.username }}</a-link>
              在仓库
              <a-link :href="item.repo.url" target="_blank">{{ item.repo.name }}</a-link>
              中
              {{ item.type }}
              <span v-if="item.payload && item.payload.commits">
                :
                <a-link
                  v-for="(commit, index) in item.payload.commits.slice(0, 2)"
                  :key="index"
                  :href="commit.url"
                  target="_blank"
                >
                  {{ commit.message.split('\n')[0] }}{{ index < item.payload.commits.length - 1 ? ', ' : '' }}
                </a-link>
                <span v-if="item.payload.commits.length > 2">...</span>
              </span>
              <span v-if="item.payload && item.payload.ref">
                分支: {{ item.payload.ref.replace('refs/heads/', '') }}
              </span>
            </div>
            <div class="arco-comment-datetime">{{ item.createTimeString }}</div>
            <div v-if="item.payload && item.payload.target_url" class="arco-comment-target-url">
              <a-link :href="item.payload.target_url" target="_blank">查看详情</a-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import axios from 'axios'
import { onMounted, ref } from 'vue'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

// 数据接口类型定义
interface DataItem {
  id: number
  type: string
  actor: {
    username: string
    nickname: string
    avatar: string
    url: string
  }
  repo: {
    name: string
    url: string
  }
  payload: {
    commits?: Array<{
      message: string
      url: string
    }>
    ref?: string
    target_url?: string
  }
  created_at: string
  createTimeString: string
}

// API Token
const token = 'cf4e19b979ad9a5b17072a0644fad25b' // 替换为你的 Gitee Token

// 定义响应式数据
const dataList = ref<DataItem[]>([])
const loading = ref(false)

// 获取列表数据
const getDataList = async () => {
  try {
    loading.value = true
    const response = await axios.get<any[]>(
      'https://gitee.com/api/v5/orgs/continew-admin_1/events', // Gitee API
      {
        headers: {
          'Authorization': `token ${token}`,
          'Cache-Control': 'no-cache', // 禁用缓存
          'Pragma': 'no-cache', // 兼容性头
        },
      },
    )
    if (response.status === 200) {
      // 映射数据
      dataList.value = response.data.map((item) => ({
        id: item.id,
        type: item.type,
        actor: {
          username: item.actor.login,
          nickname: item.actor.name,
          avatar: item.actor.avatar_url,
          url: item.actor.html_url,
        },
        repo: {
          name: item.repo.name,
          url: item.repo.html_url,
        },
        payload: item.payload,
        created_at: item.created_at,
        createTimeString: dayjs(new Date(item.created_at)).fromNow(),
      }))
    } else {
      throw new Error(`Unexpected status code: ${response.status}`)
    }
  } catch (err) {
    console.error('API Error:', err)
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="scss">
:deep(.arco-comment:not(:first-of-type), .arco-comment-inner-comment) {
  margin-top: 10px;
}

:deep(.arco-comment:not(:last-of-type)) {
  border-bottom: 1px solid var(--color-border-1);
  padding-bottom: 10px;
}

:deep(.arco-comment-content) {
  color: var(--color-text-2);
}

:deep(.arco-comment-datetime) {
  color: var(--color-text-4);
  font-size: 12px;
  margin-top: 5px;
}

:deep(.arco-comment-target-url) {
  color: var(--color-primary);
  font-size: 12px;
  margin-top: 5px;
}

.commit.arco-comment {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 12px;
  border-bottom: none;
  padding-bottom: 0;
}

.arco-comment-details {
  margin-left: 10px;
  flex-grow: 1;
}

/* 确保头像容器有足够的空间 */
.ant-avatar {
  width: 48px;
  height: 48px;
  line-height: 48px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover; /* 确保图片填充整个容器 */
}
</style>
